<template>
	<div class="welfare">
		<div class="content" @click="toItem(pageList[0].id)">
			<image :src="pageList[0].thumbnial" style="width:100%;height:355px;border-radius:16px;"></image>
		</div>
		<div class="welfare-bottom">
			<div class="item" v-for="item in navigations" :key="item.id" @click="itemClick(item)">
				<div class="img_content">
					<image class="item-img" :src='item.logo' style="width:154px;height:154px"></image>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	const eeui = app.requireModule('eeui');
	import {
		list as wxPageList
	} from '../../../../api/wxPage'
	import {
		list as navigationList
	} from '../../../../api/navigation'
	export default {
		name: 'xcxAd',
		data() {
			return {
				tagIds: [],
				pageSize: 4,
				pageList: [{id:'',thumbnial:''}],
				navigations: [],
			}
		},
		props: ['content'],
		created() {
		this.loadPage()
		this.loadnavigation()
		},
		methods: {
			itemClick(e){
				if (e.type == 1) {
					eeui.openPage({
							url: 'root://pages/goods/category/category.js',
							params: e.typeId,
                        statusBarType: 'immersion',
                        statusBarStyle:false
						},

					);
				}
				if (e.type == 2) {
					eeui.openPage({
						url: 'root://pages/index/wxPage/wxPage.js',
						params: e.typeId,
                        statusBarType: 'immersion',
                        statusBarStyle:false
					})
				}
				if (e.type == 3) {
					eeui.openPage({
							url: 'root://pages/goods/product/details.js',
							params: e.typeId,
                        statusBarType: 'immersion',
                        statusBarStyle:false
						},

					);
				}
				if (e.type == 12) {
					eeui.openPage({
						pageType: 'web',
						url: e.path,
                        statusBarType: 'immersion',
                        statusBarStyle:false
					})
				}
			},
			toItem(e) {
				eeui.openPage({
					url: 'root://pages/index/wxPage/wxPage.js',
					params: e,
                    statusBarType: 'immersion',
                    statusBarStyle:false
				})
			},
			loadPage() {
				this.tagIds = this.content.tagids.split(',');
				for (var i = 0; i < this.tagIds.length; i++) {
					this.tagIds[i] = parseInt(this.tagIds[i])
				}
				wxPageList({

					mchId: this.getGlobalData().mchId,
					tagIds: this.tagIds
				}).then(res => {

					this.pageList = res.data.data
				})
			},
			loadnavigation() {
				this.tagIds = this.content.tagids.split(',');
				for (var i = 0; i < this.tagIds.length; i++) {
					this.tagIds[i] = parseInt(this.tagIds[i])
				}
				if (this.tagIds.length > 0) {
					navigationList({
						tagIds: this.tagIds,
						mchId: this.getGlobalData().mchId,
						pageSize:this.pageSize
					}).then(res => {
						this.navigations = res.data.data
					})
				} else {
					navigationList({
						pageSize:this.pageSize,
						mchId: this.getGlobalData().mchId,
					}).then(res => {
						this.navigations = res.data.data
					})
				}
			},
		},
		components: {},
	}
</script>

<style scoped>
	.welfare {
		position: relative;
		margin-top: 20px;
	}
	.content{
	  width: 710px;
	  margin-left: 20px;
	  border-radius: 16px;
	}

	.welfare-bottom {
		width: 710px;

		position: absolute;
		top: 150%;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
	    box-sizing: border-box;
	    left: 20px;
	}
	.item {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 154px;
	  height: 154px;
	  /* background-color: red */
	}
	.img_content{
		height: 154px;
		width: 154px;
	}
	.item-img {
		width: 100%;
	  height: 100%;
	}
	.text_content{
		overflow: hidden;
		margin-top: 10px;
		text-align: center;
		text-overflow: ellipsis;
	}
	.img-text {
		font-size:24px;
		font-weight:400;
		color:rgba(193,71,51,1);
		line-height:36px;
	}



</style>
